/*
 This file 'wlscjg' is part of Firebird Integrated Solution 1.0

 Copyright (c) 2020 Lincong

 Contact:  
        Email: lincong1987@gmail.com

        QQ: 159257119
 
 See Usage at http://www.jplatformx.com/firebird

 Create date: 2020-05-21 14:48
 */
@import "common";

@name: zdwxy;
@dev:  false;

/**********************************/
.panel(@name, 1, 8, 90, 468, 239);
#@{name}_1_wrapper {
    background: data-uri("../img/zdwxy-panel-bg-1.png") no-repeat;
}


/**********************************/
.panel(@name, 2, 488, 90, 468, 239);
#@{name}_2_wrapper {
    background: data-uri("../img/zdwxy-panel-bg-2.png") no-repeat;
}

/**********************************/
.panel(@name, 3, 8, 337, 948, 239);
#@{name}_3_wrapper {
    background: data-uri("../img/zdwxy-panel-bg-3.png") no-repeat;
}

/**********************************/
.panel(@name, 4, 8, 584, 470, 240);
#@{name}_4_wrapper {
    background: data-uri("../img/zdwxy-panel-bg-4.png") no-repeat;
}

#@{name}_4 {
    
    .alarm-info {
	clear:    both;
	overflow: hidden;
	
	.alarm-percent {
	    float: left;
	    
	    span {
		font-size:     26px;
		font-weight:   bold;
		color:         rgba(255, 255, 255, 1);
		padding-right: 20px;
		text-align:    right;
		display:       block;
		width:         175px;
		margin-right:  25px;
	    }
	    
	    &.up {
		span {
		    background: data-uri("../img/icon-alarm-up.png") no-repeat 160px 12px;
		}
	    }
	    
	    &.down {
		span {
		    background: data-uri("../img/icon-alarm-down.png") no-repeat 160px 12px;
		}
	    }
	    
	}
	
	.alarm-legend {
	    float:       left;
	    padding-top: 8px;
	    
	    span {
		font-size:    16px;
		color:        rgba(255, 255, 255, 1);
		padding-left: 28px;
		display:      block;
		width:        110px;
	    }
	    
	    &.red {
		span {
		    background: data-uri("../img/icon-alarm-red.png") no-repeat 0 7px;
		}
	    }
	    
	    &.orange {
		span {
		    background: data-uri("../img/icon-alarm-orange.png") no-repeat 0 7px;
		}
	    }
	}
    }
    
    .alarm-table {
	clear:    both;
	overflow: hidden;
	
	.alarm-progress-title {
	    clear:    both;
	    overflow: hidden;
	    
	    .center {
		width:  82px;
		height: 48px;
		float:  left;
	    }
	    
	    .left, .right {
		width:       180px;
		height:      48px;
		float:       left;
		margin-left: 15px;
		
		span {
		    display:    block;
		    text-align: center;
		    font-size:  16px;
		    color:      rgba(255, 255, 255, 1);
		    
		    em {
			font-size:    22px;
			font-weight:  bold;
			font-style:   normal;
			color:        rgba(82, 255, 253, 1);
			margin-right: 7px;
			
		    }
		}
	    }
	    
	    .right {
		margin-left: 0
	    }
	    
	    
	}
	
	.alarm-progress {
	    clear:    both;
	    overflow: hidden;
	    
	    .center {
		width: 82px;
		float: left;
		
		span {
		    font-size:   16px;
		    color:       rgba(255, 255, 255, 1);
		    text-align:  center;
		    display:     block;
		    padding-top: 10px;
		}
	    }
	    
	    .left, .right {
		width:       180px;
		height:      48px;
		float:       left;
		margin-left: 15px;
		
		background:  rgba(255, 255, 255, 0);
		border:      1px solid rgba(2, 234, 252, 0.3);
		
		.progress-bar {
		    position: relative;
		    height:   20px;
		    
		    .num {
			position:  absolute;
			top:       13px;
			font-size: 16px;
			color:     rgba(255, 255, 255, 1);
		    }
		    
		    .progress-bar-inner {
			top:           13px;
			position:      absolute;
			width:         50%;
			height:        20px;
			border-radius: 1px;
		    }
		    
		    &.red {
			.progress-bar-inner {
			}
		    }
		    
		    &.orange {
			.progress-bar-inner {
			}
		    }
		}
		
	    }
	    
	    .left {
		
		.progress-bar {
		    .num {
			left: 5px;
		    }
		    
		    .progress-bar-inner {
			right: 0;
		    }
		    
		    &.red {
			.progress-bar-inner {
			    background: linear-gradient(270deg, rgba(173, 45, 45, 1) 0%, rgba(216, 74, 86, 1) 100%);
			}
		    }
		    
		    &.orange {
			.progress-bar-inner {
			    background: linear-gradient(270deg, rgba(207, 122, 18, 1) 0%, rgba(229, 167, 71, 1) 100%);
			}
		    }
		}
		
	    }
	    
	    .right {
		margin-left: 0;
		
		.progress-bar {
		    .num {
			right: 5px;
		    }
		    
		    .progress-bar-inner {
		    }
		    
		    &.red {
			.progress-bar-inner {
			    background: linear-gradient(90deg, rgba(173, 45, 45, 1) 0%, rgba(216, 74, 86, 1) 100%);
			}
		    }
		    
		    &.orange {
			.progress-bar-inner {
			    background: linear-gradient(90deg, rgba(207, 122, 18, 1) 0%, rgba(229, 167, 71, 1) 100%);
			}
		    }
		}
	    }
	    
	    
	}
	
    }
    
}

/**********************************/
.panel(@name, 5, 486, 584, 470, 240);
#@{name}_5_wrapper {
    background: data-uri("../img/zdwxy-panel-bg-5.png") no-repeat;
}

#@{name}_5_card {
    position:   absolute;
    left:       502px;
    top:        638px;
    width:      90px;
    
    background: data-uri("../img/zdwxy-5-card-bg.png") no-repeat;
    height:     170px;
    
    .num {
	
	text-align:  center;
	color:       rgba(82, 255, 253, 1);
	font-size:   34px;
	font-family: DINPro-Bold, DINPro;
	font-weight: bold;
	margin-top:  36px;
    }
    
    .desc {
	text-align: center;
	margin-top: 5px;
	font-size:  16px;
	color:      rgba(255, 255, 255, 1);
    }
}

/**********************************/
.panel(@name, 6, 8, 832, 948, 240);
#@{name}_6_wrapper {
    background: data-uri("../img/zdwxy-panel-bg-6.png") no-repeat;
}

/**********************************/
.panel(@name, 7, 964, 90, 1912, 982);

#zdwxy_7_ent_link {
    .absolute(994px, 160px, 157px, 44px);
    background: data-uri("../img/icon-ent-link.png") no-repeat;
    padding:    6px 0 0 42px;
    font-size:  22px;
    cursor: pointer;
    
    &:hover {
	opacity: 0.8;
    }
}

#zdwxy_7_trend_btn {
    .absolute(978px, 947px, 113px, 110px);
    background: data-uri("../img/icon-trend-btn.png") no-repeat;
    cursor: pointer;
    .transition();
    z-index: 100;
    
    &:hover {
	filter: brightness(2);
    }
}

#zdwxy_7_trend {
    .absolute(978px, 947px, 113px, 110px);
    z-index: 100;
}


/**********************************/
.panel(@name, 8, 2884, 90, 948, 547);
#@{name}_8_wrapper {
    background: data-uri("../img/zdwxy-panel-bg-8.png") no-repeat;
}

#@{name}_8 {
    top: 90px;
    
    .total-ent-num {
	background: rgba(10, 40, 99, 0.6);
	border:     1px solid rgba(99, 161, 254, 0.6);
	height:     100px;
	margin:     10px;
	clear:      both;
	position:   relative;
	
	.title {
	    position:  absolute;
	    top:       35px;
	    left:      279px;
	    font-size: 22px;
	    color:     rgba(255, 255, 255, 1);
	    display:   block;
	    
	    &::before {
		content:    "";
		display:    block;
		position:   absolute;
		top:        10px;
		left:       -60px;
		background: data-uri("../img/title-before-bg.png") no-repeat;
		width:      41px;
		height:     11px;
	    }
	    
	    &::after {
		content:    "";
		display:    block;
		position:   absolute;
		top:        10px;
		right:      -60px;
		background: data-uri("../img/title-after-bg.png") no-repeat;
		width:      41px;
		height:     11px;
	    }
	}
	
	.flop {
	    position: absolute;
	    top:      16px;
	    left:     481px;
	}
    }
    
    
    .tab {
	
	position: relative;
	
	.tab-header {
	    padding-left: 6px;
	    height:       110px;
	    position:     absolute;
	    top:          0;
	    left:         0;
	    z-index:      10;
	    
	    a {
		background: #11235c;
		border:     1px solid rgba(99, 161, 254, 0.6);
		height:     100px;
		margin:     0 4px 4px 4px;
		display:    block;
		width:      460px;
		transition: none;
		
		.container {
		    position: relative;
		    
		    .title {
			position:  absolute;
			top:       33px;
			left:      44px;
			font-size: 22px;
			color:     rgba(255, 255, 255, 1);
			display:   block;
			
		    }
		    
		    .flop {
			position: absolute;
			top:      16px;
			left:     189px;
		    }
		}
		
		&.active {
		    border-bottom: none;
		    height:        110px;
		}
		
		&:hover {
		    opacity: 1;
		}
		
	    }
	}
	
	.tab-content {
	    z-index:    2;
	    position:   absolute;
	    top:        109px;
	    left:       0;
	    margin:     0 4px 4px 4px;
	    background: #11235c;
	    border:     1px solid rgba(99, 161, 254, 0.6);
	    height:     308px;
	    width:      928px;
	    margin:     0 10px;
	    
	    .content {
		height: 302px;
		width:  928px;
	    }
	}
    }
    
}

#zdwxy_8_chart_1 {
    height: 308px;
    width:  928px;
}

#zdwxy_8_chart_2 {
    height: 308px;
    width:  928px;
}


/**********************************/
.panel(@name, 9, 2884, 645, 948, 427);
#@{name}_9_wrapper {
    background: data-uri("../img/zdwxy-panel-bg-9.png") no-repeat;
}

#@{name}_9 {
    padding:  10px 30px 10px 20px;
    
    clear:    both;
    position: relative;
    
    .card {
	float:        left;
	width:        430px;
	margin-right: 38px;
	
	.card-header {
	    height:  60px;
	    padding: 10px 0;
	    
	    .title {
		font-size:  16px;
		color:      #03cceb;
		display:    block;
		text-align: center;
		width:      130px;
		position:   relative;
		margin:     0 auto;
		
		
		&::before {
		    content:    "";
		    display:    block;
		    position:   absolute;
		    top:        7px;
		    left:       -60px;
		    background: data-uri("../img/title-before-bg.png") no-repeat;
		    width:      41px;
		    height:     11px;
		}
		
		&::after {
		    content:    "";
		    display:    block;
		    position:   absolute;
		    top:        7px;
		    right:      -60px;
		    background: data-uri("../img/title-after-bg.png") no-repeat;
		    width:      41px;
		    height:     11px;
		}
	    }
	}
	
	&:last-child {
	    margin-right: 0;
	}
	
	.card-body {
	    
	     
	    
	}
    }
    
    
}


/** others ********************************/


#xxx {
    display:    none;
    position:   absolute;
    top:        350px;
    left:       100px;
    background: #eee;
    width:      500px;
    height:     500px;
    z-index:    1111;
    
    .x0y0 {
	position:   absolute;
	height:     1px;
	width:      1px;
	background: red;
	
	left:       438px;
	top:        122px;
	
    }
    
    .x1y1 {
	position:   absolute;
	height:     5px;
	width:      5px;
	background: green;
	
	left:       72px;
	top:        122px;
	
    }
    
    .x0y0 {
	position:   absolute;
	height:     5px;
	width:      5px;
	background: blue;
	
	left:       82px;
	top:        102px;
	
    }
    
    .x0y0 {
	position:   absolute;
	height:     5px;
	width:      5px;
	background: #000;
	
	left:       448px;
	top:        102px;
	
    }
}